import React, { Component, Fragment } from 'react'
import { CSSTransition, TransitionGroup } from 'react-transition-group'
import './style.css'


class MyTransition extends Component {
  constructor(props) {
    super(props)
    this.handleAddClick = this.handleAddClick.bind(this)
    this.handleOnEntered = this.handleOnEntered.bind(this)
    this.handleReduceClick = this.handleReduceClick.bind(this)
    this.state = {
      list: [],
      show: true
    }
  }
  render() {
    const { list } = this.state
    return (
      <Fragment>
        <TransitionGroup>
          {
            list.map((item, index) => {
              return (
                <CSSTransition
                  key={index}
                  timeout={1000}
                  classNames='fade'
                  unmountOnExit
                >
                  <div>
                    <div>{item}</div>
                    <div>{item}</div>
                  </div>
                </CSSTransition>
              )
            })
          }
        </TransitionGroup>
        <CSSTransition
          in={this.state.show}
          timeout={1000}
          classNames='fade'
          unmountOnExit
          onEntered={this.handleOnEntered}
          appear={true}
        >
          <div>myTransition</div>
        </CSSTransition>
        <button onClick={this.handleAddClick}>add</button>
        <button onClick={this.handleReduceClick}>reduce</button>
      </Fragment>
    )
  }
  handleOnEntered(el) {
    el.style.color = 'red'
  }
  handleAddClick() {
    this.setState((prevState) => ({
      list: [...prevState.list, 'item'],
      show: !prevState.show
    }))
  }
  handleReduceClick() {
    debugger;
    this.setState((prevState) => {
      const list = [...prevState.list]
      if (list.length) {
        list.splice(0, 1)
      } else {
        alert('没得删了加一个呗')
      }
      return {
        list
      }
    })
  }
}
export default MyTransition